<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17.1.1-传统Diff算法问题</title>
</head>
<body>

</body>
    <script>
        /**
         * 编译优化
         * - 指的是编译器将模板编译为渲染函数的过程中，尽可能多地提取关键信息，并以此指导生成最优代码的过程
         * - 优化的方向基本一致，即尽可能地区分动态内容和静态内容，并针对不同的内容采用不同的优化策略
         * 
         * 三种关于传统虚拟 DOM 的 Diff 算法
         * - 无论哪一种 Diff 算法，当它在比对新旧两棵虚拟 DOM 树的时候，总是要按照虚拟 DOM 的层级结构 “一层一层” 地遍历
         * 
         * <div id="foo">
         *  <p class="bar">{{ text }}</p>
         * </div>
         * 传统 Diff 算法对比新旧两棵虚拟 DOM 树的过程如下
         * - 对比 div 节点，以及该节点的属性和子节点
         * - 对比 p 节点，以及该节点的属性和子节点
         * - 对比 p 节点的文本子节点，如果文本子节点的内容变了，则更新之，否则什么都不做
         * 
         * 跳过这些无意义的操作，性能将会大幅提升
         * - 模板的结构非常稳定。
         * - 通过编译手段，我们可以分析出很多关键信息，例如哪些节点是静态的，哪些节点是动态的。
         * - 结合这些关键信息，编译器可以直接生成原生DOM 操作的代码，
         * - 这样甚至能够抛掉虚拟 DOM，从而避免虚拟 DOM 带来的性能开销
         * 
         * 为什么虚拟 DOM 会产生额外的性能开销呢？
         * - 原因在于，渲染器在运行时得不到足够的信息。
         *    传统 Diff 算法无法利用编译时提取到的任何关键信息，这导致渲染器在运行时不可能去做相关的优化
         * - Vue.js 3 的编译器会将编译时得到的关键信息 “附着” 在它生成的虚拟 DOM 上，这些信息会通过虚拟 DOM 传递给渲染器。
         *    最终，渲染器会根据这些关键信息执行 “快捷路径”​，从而提升运行时的性能。
         * 
        */
    </script>
    

</html>